<template>
  <div
    ref="customForm"
    class="custom-van-select custom--select custom-form-container"
  >
    <!-- inputValue: {{ inputValue }} -->
    <CustomVanField
      :error-message="errorMessage"
      :required="required"
      :label="label"
      :disabled="canDo"
      is-link
      @click.native.stop="openPicker"
    >
      <van-field
        readonly
        :value="inputValue"
        :placeholder="placeholder || `请选择${label}`"
        :disabled="canDo"
        :style="bG"
      >
        <template #button>
          <i
            :class="`van-icon van-icon-${rightIcon}`"
            @click.stop="clickRightIcon"
          />
        </template>
      </van-field>
    </CustomVanField>
    <!-- :close-on-click-overlay="false" -->
    <van-popup
      v-if="!canDo"
      v-model="show"
      round
      position="bottom"
      get-container="#app"
      :style="{ height: '50%' }"
      @closed="closedPopup"
    >
      <div
        v-if="filter"
        class="search-input"
      >
        <search-input
          v-model="filterVal"
          :placeholder="`请输入${label}！`"
          @input="inputFilter"
        />
      </div>
      <NoDataAvailable
        v-show="isNotData"
      />
      <van-picker
        v-show="!isNotData"
        v-model="pickerVal"
        show-toolbar
        :columns="filterOption"
        :title="title || `选择${label}`"
        value-key="field_label"
        @confirm="handlerConfirm"
        @cancel="handlerCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput';
import NoDataAvailable from '@/components/NoDataAvailable';
import field from '../mixins/field';
import rule from '../mixins/rule';
import choice from '../mixins/choice';
import picker from '../mixins/picker';
import model from '../mixins/model';
import select from '../mixins/select';
import collect from '../mixins/collect/select';
import disabled from '../mixins/setting/disabled';
import remote from '../mixins/remote/choice';

export default {
  name: 'CustomVanSelect',

  components: {
    SearchInput,
    NoDataAvailable
  },

  mixins: [field, model('change'), remote, rule, picker, choice, collect, disabled, select]
};
</script>

<style lang="scss" scoped>
.search-input {
  padding-top: $padding-sm;
  padding-right: $padding-sm;
  padding-left: $padding-sm;
}
.no-data-container {
  text-align: center;
  margin-top: 10px;
  color: $gray-12;
}
</style>
